<template>
  <div>
    <div class="appDetail">
      <div class="datu">
        <img :src="$store.state.imgs + bookList.pictureUrl" alt="" />
        <router-link to="/"
          ><div class="tu3">
            <img
              src="@/assets/images/details/Othermobilephonenumberverificationcodeinputpage_button_return.png"
              alt="1"
            /></div
        ></router-link>

        <div class="tu2">
          <img
            src="@/assets/images/details/Scriptdetails_Firstpicture_Scriptfengmian.png"
            alt=""
          />
        </div>
      </div>
    </div>
    <div class="introduce">
      <div class="introduce1">
        <div>
          <p class="text_1">{{ bookList.upTime }}| {{ bookList.bookTime }}</p>
        </div>
        <div>
          <div class="wuchi">
            <p>{{ bookList.name }}</p>
            <span class="wuchi1"
              ><img src="@/assets/images/details/qwert.png" alt="" />{{
                bookList.price
              }}</span
            >
          </div>
        </div>
      </div>
      <div class="box">
        <van-row style="font-size: 0.1rem">
          <van-col class="icons">{{ bookList.peopleNum }}</van-col>
          <van-col class="icons">{{ bookList.type }}</van-col>
          <van-col class="icons">{{ bookList.background }}</van-col>
          <van-col class="icons">{{ bookList.hard }}</van-col>
        </van-row>
      </div>
      <div class="ping">
        <div class="pinglun">
          <img src="@/assets/images/details/xinxi.png" alt="" />
        </div>
        <div class="pinglun">
          <img src="@/assets/images/details/xie.png" alt="" />
        </div>
        <div class="pinglun">
          <img src="@/assets/images/details/aixin.png" alt="" />
        </div>
      </div>
      <div class="story">
        <p class="story1">故事简介</p>
        <p>{{ bookList.introduction }}</p>

        <p class="make">预约场次</p>
      </div>
      <div class="appointment" v-for="item in 2" :key="item">
        <div class="appointment1">
          <div class="zuo">
            <img class="tou" src="@/assets/logo.png" alt="" />
          </div>
          <div class="you">
            <van-icon name="home-o" class="fang" />
            <span class="fang1">无耻之徒</span>
            <p class="nai">小奶兔</p>
            <div>
              <div class="jindu1">拷贝</div>
              <div class="jindu">好评率99.3%</div>
            </div>
            <p class="kai">开本时间:5/18 周二 17点30</p>
            <div class="xuyue">预约</div>
          </div>
        </div>
      </div>
      <div class="bigBox">
        <div class="jubenBox">
          <router-link class="juben" @click="huan($route.params.id)" to=""
            >剧本评论</router-link
          >
        </div>
        <div>
          <router-link class="juben1" to="/dongtai">相关动态</router-link>
        </div>
      </div>
      <router-view></router-view>
      <router-link to="/dmroom"
        ><button class="wei">2位DM等待中</button></router-link
      >
    </div>
  </div>
</template>

<script>
import { Col, Row } from "vant";
import pop from "@/components/popUp.vue";
import API from "@/api";

export default {
  components: {
    Col,
    Row,
    pop,
  },
  data() {
    return {
      imgs: require("@/assets/images/details/Script details_First picture_Script feng mian@2x.png"),
      show: false,
      bookList: [],
      bookId: "",
    };
  },
  created() {
    this.bookId = this.$route.params;
    this.getBookById();
  },
  methods: {
    changeShow() {
      this.show = true;
    },
    getBookById() {
      API.getFindBookById(this.bookId).then(({ data }) => {
        this.bookList = data.data;
        // console.log(this.bookList);
      });
    },
    huan() {
      let params = {
        bookId: this.bookId.id,
      };
      this.$router.push("/details/" + this.bookId.id);

      API.getComment(params).then(({ data }) => {
        console.log(data);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.appDetail {
  display: flex;
  position: relative;
}
.datu {
  position: relative;
}
.datu img {
  width: 3.75rem;
  height: 4.5rem;
}
.tu2 {
  background: transparent;
  img {
    position: absolute;
    width: 0.15rem;
    height: 0.15rem;
    background-color: rgb(0, 0, 0, 0);
    left: 3.4rem;
    top: 0.15rem;
    background: transparent;
  }
}
.tu3 {
  background: transparent;
  img {
    position: absolute;
    width: 0.08rem;
    height: 0.15rem;
    background-color: rgba(0, 0, 0, 0.877);
    left: 0.2rem;
    top: 0.15rem;
    background: transparent;
  }
}
.introduce {
  position: absolute;
  margin-top: -0.1rem;
  width: 3.75rem;
  background-color: #ffffff;
  border-radius: 15px 15px 0px 00px;
}
.introduce1 {
  width: 3.35rem;
  background-color: #ffffff;
  margin: auto;
}
.text_3 {
  font-size: 0.16rem;
  float: left;
}
.label_2 {
  width: 0.15rem;
  height: 0.15rem;
}
.text-group_1 {
  font-size: 0.16rem;
  float: right;
}
.text_1 {
  font-size: 0.11rem;
  margin-top: 0.1rem;
  margin-bottom: 0.09rem;
  color: #999999;
}
.group_33 {
  width: 1.78rem;
  height: 0.16rem;
  margin: 0.095rem 0 0 0.2rem;
}

.tag_1 {
  background-color: rgba(242, 229, 255, 1);
  border-radius: 16px;
  height: 0.16rem;
  width: 0.4rem;
}
.wuchi {
  width: 3.35rem;
  height: 0.3rem;
  font-size: 0.16rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wuchi p {
  font-size: 0.16rem;
}

.wuchi1 img {
  width: 0.15rem;
  height: 0.15rem;
  margin-bottom: 0.02rem;
}
.icons {
  width: 0.4rem;
  height: 0.16rem;
  background-color: #f2e5ff;
  border-radius: 0.1rem;
  text-align: center;
  margin-right: 0.1rem;
}
.box {
  margin-left: 0.2rem;
  margin-top: 0.06rem;
}
.ping {
  padding-left: 0.1rem;
  margin-right: 0.1rem;
  display: flex;
  justify-content: space-around;
}
.pinglun img {
  width: 0.5rem;
  padding-bottom: 0.22rem;
  margin-top: 0.22rem;
}
.story {
  margin-left: 0.2rem;
  font-size: 0.13rem;
  color: #333;
  line-height: 0.2rem;
}
.story1 {
  font-size: 0.16rem;
  font-weight: 600;
  margin-bottom: 0.09rem;
}
.make {
  font-size: 0.16rem;
  font-weight: 600;
  padding-top: 0.19rem;
}
.appointment {
  margin-left: 0.2rem;
  margin-top: 0.18rem;
}
.appointment1 {
  width: 3.35rem;
  height: 1.25rem;
  border: 0.01rem solid #000000;
  border-radius: 0.1rem;
}
.tou {
  width: 0.77rem;
  height: 1.02rem;
  background-color: #999999;
  margin-left: 0.08rem;
  border-radius: 0.1rem;
}
.zuo {
  width: 0.86rem;
  height: 1.25rem;
  //   background-color: aqua;
  float: left;
  margin-right: 0.1rem;
}
.fang {
  //   margin-bottom: 2rem;
  //   margin-top: 0.08rem;
  padding-top: -2rem;
  font-size: 0.1rem;
  position: absolute;
  top: 0.12rem;
}
.you {
  width: 2rem;
  height: 1.25rem;
  //   background-color: yellow;
  float: left;
  position: relative;
}
.fang1 {
  font-size: 0.1rem;
  position: absolute;
  top: 0.08rem;
  left: 0.15rem;
}
.nai {
  font-size: 0.14rem;
  margin-top: 0.28rem;
}
.jindu {
  position: absolute;
  width: 0.74rem;
  height: 0.18rem;
  border-radius: 0.07rem;
  font-size: 0.01rem;
  text-align: center;
  background-color: #9f40ff;
  color: #ffffff;
  border: 0.01rem solid #000000;
}
.jindu1 {
  position: absolute;
  width: 1rem;
  height: 0.18rem;
  border-radius: 0.07rem;
  margin-left: 0.5rem;
  background-color: #d3a8ff;
  color: #ffffff;
  font-size: 0.02rem;
  text-align: center;
  float: right;
  border: 0.01rem solid #000000;
}
.kai {
  font-size: 0.1rem;
  color: #666666;
  margin-top: 0.2rem;
}
.xuyue {
  width: 0.7rem;
  height: 0.22rem;
  background-color: #9f40ff;
  border-radius: 0.2rem;
  font-size: 0.12rem;
  text-align: center;
  line-height: 0.25rem;
  float: right;
  position: absolute;
  left: 1.5rem;
  top: 0.9rem;
}
.jubenBox {
  position: relative;
}
.juben {
  font-size: 0.15rem;
  position: absolute;
  left: 0.2rem;
  color: #333;
  font-weight: 600;
  margin-top: 0.2rem;
  height: 0.2rem;
}
.juben1 {
  font-size: 0.15rem;
  position: absolute;
  left: 1rem;
  color: #333;
  font-weight: 600;
  margin-top: 0.2rem;
}
.wei {
  width: 3.35rem;
  height: 0.3rem;
  margin: auto;
  font-size: 0.13rem;
  background-color: #9f40ff;
  margin-top: 0.5rem;
  border-radius: 0.2rem;
  text-align: center;
  padding-top: 0.05rem;
  color: #ffffff;
  margin-left: 0.2rem;
}
.bigBox {
  margin-bottom: 0.5rem;
}
</style>
